<template>
  <view class="hs1-home">
    <view class="hs1-bg"> </view>
    <view class="bs1-nr">
      <swiper display-multiple-items="5">
        <swiper-item v-for="(item, index) in tagList" :key="index">
          <text
            :class="{ 'hs1-is': Sindex == index }"
            @click="SonClick(index)"
            >{{ item }}</text
          >
        </swiper-item>
      </swiper>
      <view>
        <text>#虚拟人</text>
        <text>虚拟人</text>
        <view>
          <text></text>
          <text>虚拟人</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      Sindex: 0,
      tagList: [
        "热度",
        "最新",
        "关注",
        "虚拟人",
        "卡通",
        "品牌",
        "搞笑",
        "游戏",
        "动漫",
        "漫画",
      ],
    };
  },
  methods: {
    // 被点击
    SonClick(index) {
      this.Sindex = index;
    },
  },
};
</script>

<style lang="scss">
.hs1-home {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: #fff;
  overflow: hidden;
  box-sizing: border-box;

  background-image: url(/static/34.jpg);
  // transform: scale(1.2);
  background-size: 150% auto;
  // 组件放大

  background-position: center -100px;
  background-repeat: no-repeat;
}

.hs1-is {
  background: #f4b062 !important;
  color: white !important;
}

.hs1-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(176deg, rgba(255, 255, 255, 0) -10%, #ffffff 70%);
}

.bs1-nr {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 90px;
  padding-left: 20px;

  uni-swiper {
    display: flex;
    height: 34px;
    uni-swiper-item {
      display: flex;
      width: auto;
      text {
        padding: 9px 14px;
        background-color: #fff;
        border-radius: 5px;
        color: #616161;
        font-size: 12px;

        line-height: 17px;
      }
    }
  }
}
</style>